import 'package:flutter/material.dart';
import 'package:flutter_wechat/data/Data.dart';
import 'package:flutter_wechat/widget/MyWidget.dart';
/**
 * Create by laoge
 * on 2021/4/12 0012
 */

class Contact extends StatefulWidget {
  @override
  _Contact createState() {
    return _Contact();
  }
}

class _Contact extends State<Contact> {
  String labels = "↑☆ABCDEFGHIJKLMNOPQRSTUVWSYZ#";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: MyWidget.buildAppBar("通讯录"),
      body: Stack(
        alignment: Alignment.center,
        children: [
          Column(
            children: [
              Container(
                height: MediaQuery.of(context).size.height -
                    1 -
                    MediaQuery.of(context).padding.top -
                    kToolbarHeight -
                    kBottomNavigationBarHeight,
                child: ListView.builder(
                    itemCount: Data.contact.keys.toList().length,
                    itemBuilder: (context, index) {
                      return Data.contact.keys.toList()[index] == "first"
                          ? Column(children: [
                              buildItem(Colors.orange,
                                  "assets/images/addnew.png", "新的朋友"),
                              buildItem(Colors.green, "assets/images/group.png",
                                  "群聊"),
                              buildItem(
                                  Colors.blue, "assets/images/label.png", "标签"),
                              buildItem(Colors.blue, "assets/images/public.png",
                                  "公众号"),
                            ])
                          : Column(
                              children: [
                                Container(
                                  padding: EdgeInsets.only(left: 17),
                                  alignment: Alignment.centerLeft,
                                  height: 40,
                                  width: MediaQuery.of(context).size.width,
                                  color: Colors.grey.shade300,
                                  child: Text(
                                    Data.contact.keys.toList()[index],
                                    style: TextStyle(
                                        fontSize: 16, color: Colors.grey),
                                  ),
                                ),
                                Container(
                                  // height: Data
                                  //     .contact[
                                  // Data.contact.keys.toList()[index]]
                                  //     .length *
                                  //     65.0,
                                  child: ListView.builder(
                                      shrinkWrap: true,
                                      physics: NeverScrollableScrollPhysics(),
                                      itemCount: Data
                                          .contact[
                                              Data.contact.keys.toList()[index]]
                                          .length,
                                      itemBuilder: (co, i) {
                                        return Row(
                                          children: [
                                            Container(
                                              padding: EdgeInsets.only(
                                                  top: 8,
                                                  bottom: 7,
                                                  right: 10,
                                                  left: 17),
                                              child: ClipRRect(
                                                borderRadius: BorderRadius.all(
                                                    Radius.circular(10)),
                                                child: Image.asset(
                                                  Data.contact[Data.contact.keys
                                                          .toList()[index]][i]
                                                      ["avater"],
                                                  width: 50,
                                                ),
                                              ),
                                            ),
                                            Expanded(
                                              child: Container(
                                                alignment: Alignment.centerLeft,
                                                height: 55,
                                                child: Text(
                                                  Data.contact[Data.contact.keys
                                                          .toList()[index]][i]
                                                      ["nickName"],
                                                  style: TextStyle(
                                                      color: Colors.black,
                                                      fontSize: 18),
                                                ),
                                              ),
                                            )
                                          ],
                                        );
                                      }),
                                ),
                              ],
                            );
                    }),
              ),
            ],
          ),
          Positioned(
              right: 5,
              child: Container(
                color: Colors.transparent,
                width: 20,
                // alignment: Alignment.center,
                height: labels.length * 20.0,
                child: ListView.builder(
                    itemCount: labels.length,
                    itemBuilder: (context, index) {
                      return Ink(
                        child: InkWell(
                          highlightColor: Colors.green,
                          splashColor: Colors.green,
                          hoverColor: Colors.green,
                          focusColor: Colors.green,
                          borderRadius: BorderRadius.all(Radius.circular(10)),
                          // splashColor: Colors.green,
                          onTap: () {
                            print(labels[index]);
                          },
                          child: Container(
                            alignment: Alignment.center,
                            height: 20,
                            width: 20,
                            child: Text(
                              labels[index],
                              textAlign: TextAlign.center,
                            ),
                          ),
                        ),
                      );
                    }),
              ))
        ],
      ),
    );
  }

  Padding buildItem(Color backgroundColor, String image, String text) {
    return Padding(
      padding: EdgeInsets.only(top: 10, bottom: 5, right: 15, left: 17),
      child: Row(
        children: [
          Container(
            width: 50,
            height: 50,
            padding: EdgeInsets.all(12),
            decoration: BoxDecoration(
                color: backgroundColor,
                borderRadius: BorderRadius.all(Radius.circular(10))),
            child: Image.asset(
              image,
              color: Colors.white,
            ),
          ),
          Expanded(
            child: Container(
              alignment: Alignment.centerLeft,
              height: 55,
              margin: EdgeInsets.only(left: 10),
              decoration: BoxDecoration(
                  border: Border(
                      bottom:
                          BorderSide(color: Colors.grey.shade200, width: 0.5))),
              child: Text(
                text,
                style: TextStyle(color: Colors.black, fontSize: 18),
              ),
            ),
          )
        ],
      ),
    );
  }
}
